import { View, Navigator } from '@tarojs/components'
import XLoadMore from '../../../components/XLoadMore'
import { AtFab } from 'taro-ui'
import './index.scss'
import { useRef } from 'react'
import { useState } from 'react'
import { iccardPageApi } from '../../../services/Iccard'

export default () => {
    let [cardList, setcardList] = useState<Iccard[]>([])
    const loadMoreRef = useRef()
    function loadChargeLog(rows:Iccard[]) {
        rows.forEach(row => {
            cardList.push(row)
        })
        
        setcardList([...cardList])
    }
    return <>
        <View className='cardList'>
            {
                cardList.map(card => <View className='card'>
                    <View className='wrap'>
                        <View>卡号：{card.cardNo}</View>
                        <View>用户名：{card.username}</View>
                        <View>手机号码：{card.mobile}</View>
                        <View>
                            充值余额：{card.amount}元
                            {card.rewardAmount > 0 &&
                                <>，赠送余额：{card.rewardAmount}元</>

                            }
                        </View>
                    </View>
                    <View className='bottomNav'>
                        <Navigator className='item' url={'/userClient/pages/iccard/recharge/index?cardId=' + card.id}>充值</Navigator>
                        <View className='item'>挂失</View>
                    </View>
                </View>
                )
            }
            
        </View>

        <View className='p-l-r'>
            <XLoadMore keyName='orderId' ref={loadMoreRef} onClick={iccardPageApi} onFinish={loadChargeLog}></XLoadMore>
        </View>


        <Navigator className='addBtn' url='/userClient/pages/iccard/active/index'>
            <AtFab>
                <View className='at-icon at-icon-add'></View>
            </AtFab>
        </Navigator>

    </>
}